<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--用div的id标记,使用vue控制-->
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <!--这里的table标签只是个空壳子,表格内的数据通过json传输-->
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <!--  表头  -->
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>

        <!--使用Vue的for指令遍历表格内容-->
        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i+1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td v-if="brand.status==0">禁用</td>
            <td v-else>启用</td>
            <td>
                <a href="#">修改</a> <a href="#">删除</a>
            </td>
        </tr>

    </table>
</div>




<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    // 页面加载完成后,发送ajax请求
    // window.onload = function (){
    //     axios.get("http://localhost:8080/brand-demo2/selectAllServlet").then(function (resp){
    //        //获取数据
    //        let brands = resp.data;
    //        let tableData = "<tr>\n" +
    //            "        <th>序号</th>\n" +
    //            "        <th>品牌名称</th>\n" +
    //            "        <th>企业名称</th>\n" +
    //            "        <th>排序</th>\n" +
    //            "        <th>品牌介绍</th>\n" +
    //            "        <th>状态</th>\n" +
    //            "        <th>操作</th>\n" +
    //            "    </tr>";
    //        for(let i = 0;i < brands.length;i++){
    //            let brand = brands[i];
    //            tableData += "<tr align=\"center\">\n" +
    //                "        <td>"+(i+1)+"</td>\n" +
    //                "        <td>"+brand.brandName+"</td>\n" +
    //                "        <td>"+brand.companyName+"</td>\n" +
    //                "        <td>"+brand.ordered+"</td>\n" +
    //                "        <td>"+brand.description+"</td>\n" +
    //                "        <td>"+brand.status+"</td>\n" +
    //                "\n" +
    //                "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
    //                "    </tr>";
    //        }
    //        // 把json形式的表格解析为html输出
    //         document.getElementById("brandTable").innerHTML = tableData;
    //     });
    // }

    new Vue({
       el:"#app",
       data(){
           return {
               brands:[]
           }
       },
       mounted(){
           // 页面加载完成,发送异步请求查询数据
           var _this = this;
           axios({
               method:"get",
               url:"http://localhost:8080/brand-demo2/selectAllServlet"
           }).then(function (resp){
               _this.brands = resp.data;
           })
       }
    });
</script>
</body>
</html>